<template>
  <div class="tool" v-show="toolVisible">
    <div class="top">
      <!-- <div>{{title}}</div> -->
      <div
        class="item"
        v-for="(item,index) in tools.top"
        :key="index"
        @click="tools.top[index].isActive = !tools.top[index].isActive"
      >
        <div class="border" v-if="item.border">
          <i :class="item.icon"></i>
          <span v-if="item.text">{{item.text}}</span>
        </div>
        <div v-else>
          <i :class="item.icon"></i>
          <span v-if="item.text">{{item.text}}</span>
        </div>
      </div>
      <div class="menu">
        <i class="iconfont icon-hanbao" @click="toolVisible = !toolVisible"></i>
      </div>
    </div>
    <div class="bottom">
      <div
        class="item"
        v-for="(item,index) in tools.bottom"
        :key="index"
        :style="item.style"
        @click="changeBottomActive(index)"
      >
        <div class="active" v-if="item.isActive">
          <i :class="item.icon" :title="item.tooltip" @click="item.handle" v-if="item.handle"></i>
          <i :class="item.icon" :title="item.tooltip" v-else></i>
          <span v-if="item.text">
            {{item.text}}
            <span v-if="item.location">{{item.location}}</span>
          </span>
        </div>
        <div v-else>
          <i :class="item.icon" :title="item.tooltip" @click="item.handle" v-if="item.handle"></i>
          <i :class="item.icon" :title="item.tooltip" v-else></i>
          <span v-if="item.text">
            &nbsp;&nbsp;{{item.text}}
            <span v-if="item.location">{{item.location}}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas"; // 截图软件引入
export default {
  name: "MapTool",
  props: ["options", "image"],
  data() {
    return {
      toolVisible: true, // 工具栏的可见性
      shotImageParams: {
        el: "map",
        insertEl: "insertTmage"
      }, // 截图传递的参数
      tools: {
        top: [
          {
            icon: "iconfont icon-ditu",
            text: "地图",
            border: true
          },
          {
            icon: "iconfont icon-tongjitubiao",
            text: "统计图",
            border: true
          },
          {
            icon: "iconfont icon-biaoge",
            text: "表格"
          }
        ],
        bottom: [
          {
            icon: "iconfont icon-dingwei",
            text: "当前区域:",
            style: {
              width: "170px"
            },
            location: "四川省"
          },
          {
            icon: "iconfont icon-t-kuaijiechaxun",
            tooltip: "快捷查询"
          },
          {
            icon: "iconfont icon-zhuanyechaxun",
            tooltip: "专业查询"
          },
          {
            icon: "iconfont icon-quanping",
            tooltip: "全幅显示",
            handle: this.fullScreen
          },
          {
            icon: "iconfont icon-shanchu",
            tooltip: "清除查询显示"
          },
          {
            icon: "iconfont icon-Fun_IconA8",
            tooltip: "量算操作"
          },
          {
            icon: "iconfont icon-yanjing",
            tooltip: "区域标签显示"
          },
          {
            icon: "iconfont icon-xiangji",
            tooltip: "截屏出图",
            handle: this.screenshot
          },
          {
            icon: "iconfont icon-dayin",
            tooltip: "打印"
          },
          {
            icon: "iconfont icon-xinxi",
            tooltip: "查看操作信息"
          }
        ]
      }
    };
  },
  created() {
    this.initTop();
    this.initBottom();
    this.activeStatus();
  },
  methods: {
    initTop() {
      try {
        if (this.options && this.options.hasOwnProperty("top")) {
          this.tools.top = this.options.top;
        }
      } catch (err) {
        console.log(err);
      }
    },
    initBottom() {
      try {
        if (this.options && this.options.hasOwnProperty("bottom")) {
          this.tools.bottom = this.options.bottom;
        }
      } catch (err) {
        console.log(err);
      } // 底部按钮显示赋值

      // 截图元素赋值
      if (this.image) {
        this.shotImageParams = this.image;
      }
    },
    // 全屏显示函数
    fullScreen(event, id) {
      let element = document.getElementById("map");
      if (id) {
        element = document.getElementById("id");
      }
      // 确定全屏显示元素
      const requestMethod =
        element.requestFullScreen ||
        element.webkitRequestFullScreen ||
        element.mozRequestFullScreen ||
        element.msRequestFullScreen;
      requestMethod.call(element);
    },
    // 初始化按钮点击状态
    activeStatus() {
      for (const key in this.tools.top) {
        this.tools.top[key].isActive = false;
      }
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
    },
    // 点击图标改变显示状态
    changeBottomActive(index) {
      for (const key in this.tools.bottom) {
        this.tools.bottom[key].isActive = false;
      }
      this.tools.bottom[index].isActive = !this.tools.bottom[index].isActive;
      // 触发页面渲染操作
      const arr = this.tools.bottom.slice(0);
      this.$set(this.tools, "bottom", arr);
    },
    // 截图操作函数
    screenshot() {
      const params = this.shotImageParams;
      const el = params.el;
      const showel = document.getElementById(params.insertEl);
      const style = this.calStyle(showel); // 计算展示元素样式
      this.mkImage(style).then(el => {
        showel.insertBefore(el, showel.childNodes[0]);
      });
      // this.$nextTick(() => {
      html2canvas(document.getElementById(el), { scale: 1 }).then(canvas => {
        const temlate = document.createElement("div");
        temlate.id = "temlate";
        temlate.style.margin = "0 auto";
        document.getElementById("dialog").appendChild(temlate);
        const image = canvas.toDataURL("image/png");
        const imageEl = `<img width='520px' src=${image} />`;
        document.getElementById("temlate").innerHTML = imageEl;
        const save = document.createElement("button");
        save.innerText = "保存图片";
        save.style.background = "#1f77b4";
        save.style.padding = "5px 10px";
        save.style.marginRight = "50px";
        save.style.color = "#fff";
        save.style.border = "none";
        save.id = "save";
        const cancel = document.createElement("button");
        cancel.innerText = "取消";
        cancel.style.background = "#F56C6C";
        cancel.style.marginRight = "50px";
        cancel.style.padding = "5px 10px";
        cancel.style.color = "#fff";
        cancel.style.border = "none";
        cancel.id = "cancel";
        const down = document.createElement("button");
        down.innerText = "下载图片";
        down.style.background = "#1f77b4";
        down.style.padding = "5px 10px";
        down.style.color = "#fff";
        down.style.border = "none";
        down.id = "down";
        const br = document.createElement("div");
        document.getElementById("temlate").appendChild(br);
        document.getElementById("temlate").appendChild(cancel);
        document.getElementById("temlate").appendChild(save);
        document.getElementById("temlate").appendChild(down);
        // 图片操作绑定事件
        // 保存图片
        document.getElementById("save").addEventListener(
          "click",
          () => {
            this.$emit("saveImage", image);
          },
          true
        );
        // 取消操作
        document.getElementById("cancel").addEventListener(
          "click",
          () => {
            document.getElementById("save").removeEventListener("click", () => {
              return;
            });
            document
              .getElementById("cancel")
              .removeEventListener("click", () => {
                return;
              });
            document.getElementById("down").removeEventListener("click", () => {
              return;
            });
            document.getElementById("dialog").remove();
          },
          true
        );
        // 下载操作
        document.getElementById("down").addEventListener(
          "click",
          () => {
            const oA = document.createElement("a");
            oA.download = ""; // 设置下载的文件名，默认是'下载'
            oA.href = image;
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除
          },
          true
        );
      });
      // });
    },
    // 截图操作函数
    mkImage(style) {
      return new Promise(resolve => {
        const div = document.createElement("div");
        div.style.height = style.height;
        div.style.paddingTop =
          parseInt(style.height.slice(0, -2)) / 2 - 200 + "px";
        div.style.width = style.width;
        div.style.background = "rgba(33, 33, 33, 0.498039)";
        div.style.position = "fixed";
        div.style.zIndex = 999999;
        div.style.textAlign = "center";
        div.id = "dialog";
        return resolve(div);
      });
    },
    // 获取元素css函数
    calStyle(el) {
      const style = document.defaultView.getComputedStyle(el, null);
      return style;
    }
  }
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
@import "../font/iconfont.css";
$backColorBottom: #195f90;
$backColorTop: #1f77b4;
$hoverBackColor: #4c92c3;
$hei: 40px; //上下2个框高度
$topWidth: 90px; //上面盒子元素每个元素所占的宽度
$bottomWidth: 45px; // 下面盒子元素每个元素占得宽度
// $opacity: 0.5; //元素悬停时透明度设置
$hoverColor: #fff; //工具栏字体颜色
$color: #8ab8d8; //悬停时字体颜色
$paddleft: 5px;
$line: #408bbf; //分割线颜色
.tool {
  width: 600px;
  height: 80px;
  border-radius: 5px;
  color: $color;
  box-sizing: border-box;
  font-family: "黑体";
  .top {
    background-color: $backColorTop;
    box-sizing: border-box;
    height: $hei;
    padding-left: $paddleft;
    font-style: bold;
    > div {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      text-align: center;
      max-width: 120px;
      box-sizing: border-box;
    }
    > div.item {
      width: $topWidth;
    }
    > div.item:hover {
      background-color: $hoverBackColor;
      color: $hoverColor;
    }
    .menu {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      float: right;
      padding-top: 3px;
      padding-right: 15px;
    }
    .menu:hover {
      color: $hoverColor;
    }
    .border {
      border-right: 1px solid $line;
    }
  }
  .bottom {
    background-color: $backColorBottom;
    box-sizing: border-box;
    height: $hei;
    padding-left: $paddleft;
    > div.item {
      display: inline-block;
      height: $hei;
      line-height: $hei;
      text-align: center;
    }
    > div.item {
      width: $bottomWidth;
    }
    > div.item:hover {
      background-color: $hoverBackColor;
      color: $hoverColor;
    }
  }
  .active {
    background-color: $hoverBackColor !important;
    color: $hoverColor !important;
  }
}
</style>